<!--
 * @Author: Freude Xu
 * @Date: 2021-10-25 21:35:14
 * @LastEditors: hucc
 * @LastEditTime: 2021-11-02 19:35:31
 * @Description: 
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <div>
          <!-- 头像开始 -->
          <el-row class="demo-avatar demo-basic" style="align:center">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" :src="circleUrl"></el-avatar>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toUpdateUserFace">修改头像</el-button>
      </div>
      <!-- 头像结束 -->
      <!-- 信息列表展示开始 -->
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="登陆用户:" v-model="form.username">
            <label>{{form.username}}</label>
          </el-form-item>
          <el-form-item label="用户姓名:" v-model="form.realname">
            <label>{{form.realname}}</label>
          </el-form-item>
          <el-form-item label="用户手机:" v-model="form.telephone">
            <label>{{form.telephone}}</label>
          </el-form-item>
          <el-form-item label="用户性别:" v-model="form.gender">
            <label>{{form.gender}}</label>
          </el-form-item>
          <!-- 用户角色判断 -->
          <el-form-item label="用户角色:" v-model="form.certificationStatus">
              {{form.certificationStatus}}
          </el-form-item>
          <el-form-item label="用户生日:" v-model="form.birth">
            <label>{{format(form.birth)}}</label>
          </el-form-item>
          <el-form-item label="注册时间:" v-model="form.registerTime">
            <label>{{format(form.registerTime)}}</label>
          </el-form-item>
          <el-form-item label="邮箱:" v-model="form.email">
              <template slot-scope="scope">
                <label v-if="scope.email=='null' ">暂无</label>
                <label v-else>{{form.email}}</label>
              </template>
          </el-form-item>
          <!-- 用户状态 -->
          <el-form-item label="用户状态:" v-model="form.status">
              <el-tag type="success">{{form.status}}</el-tag>
          </el-form-item>
          <el-button style="float: right; padding: 3px 0" type="text" @click="toUpdateInfo">修改个人信息</el-button>
        </el-form>
      </div>
    </el-card>
    <!-- 信息列表展示结束 -->
    <!-- 模态框开始 -->
    <!-- 上传用户头像模态框开始 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form ref='myForm' :model="form">
        <el-form-item label="头像" :label-width="formLabelWidth" prop="userFace">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="form.userFace" class="avatar" style="width:100px" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit('myForm')">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- 上传用户头像模态框结束 -->

    <!-- 修改用户信息模态框开始 -->
    <el-dialog :title="title" :visible.sync="visibleinfo">
      <!-- 对表单中的必填项进行验证   ref表示引用-->
      <el-form :model="form" :rules='rules' ref='myForminfo'>
        <!-- 展示名称label:栏目名称 -->
        <el-form-item label="登录用户" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" :disable='true'></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop='realname'>
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop='gender'>
          <el-radio v-model="form.gender" label="男">男</el-radio>
          <el-radio v-model="form.gender" label="女">女</el-radio>
        </el-form-item>
        <!-- 序号输入框展示 -->
        <el-form-item label="用户手机" :label-width="formLabelWidth">
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker placeholder="选择出生日期" v-model="form.birth" style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmitinfo('myForminfo')">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户信息模态框结束 -->

    <!-- 模态框结束 -->
  </div>
</template>
<script>
  import {
    findUserDetailsById,
    alterUserface,
    saveOrUpdate
  } from '@/api/employee'
  // 上传图片的路径
  import {
    showFileURL,
    uploadFileURL
  } from "@/utils/config";
  import {
    parseTime
  } from '@/utils/index'
  export default {
    data() {
      return {
        circleUrl: '',
        // 获取路由携带的参数id
        id: 0,
        // 用户详情信息
        form: {},

        // 模态框参数
        title: '',
        visible: false,
        visibleinfo: false,
        formLabelWidth: '80px',
        showFileURL,
        uploadFileURL,
        imageUrl: '',
        // 校验表单中的必填项
        rules: {
          realname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }, ],
          gender: [{
            required: true,
            message: '请选择性别',
            trigger: 'blur'
          }, ],
        }
      }
    },
    methods: {
      // 转换时间戳
      format(time) {
        return parseTime(time);
      },

      // 根据id查询员工详情页
      async findUserById(id) {
        let res = await findUserDetailsById({
          id
        });
        // console.log(res);
        this.circleUrl = res.data.userFace;
        this.form = res.data;
      },
      //修改用户头像
      toUpdateUserFace() {
        this.visible = true;
        this.title = '修改用户头像';
      },
      // 提交头像修改申请
      toSubmit() {
        this.$refs['myForm'].validate(async valid => {
          if (valid) {
            let res = await alterUserface(this.form);
            this.$message.success({
              title: "更新成功",
              message: res.message,
              type: "success"
            });
            this.visible = false;
            this.findUserById();
          } else {
            this.$message.error('保存失败！');
            return false;
          }
        });
      },

      // 图片上传成功回调
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // console.log(res);
        this.form.userFace = showFileURL + res.data.id;
      },

      // 图片上传之前回调
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      // 弹出修改个人信息模态框
      toUpdateInfo() {
        this.visibleinfo = true;
        this.title = '修改用户头像';
      },
      // 提交修改后的个人信息模块
      toSubmitinfo(formName) {
        this.$refs[formName].validate(async valid => {
          // 当校验通过时，发送请求
          if (valid) {
            // 异步请求
            let res = await saveOrUpdate(this.form);
            this.visibleinfo = false;
            // console.log(res);
            // 成功提示
            this.$message({
              message: res.message,
              type: "success"
            });
            this.findUserById(this.id);
            // 当校验不通过时
          } else {
            this.$message.error('保存失败！');
            return false;
          }
        });
      }
    },
    created() {
      // console.log(this.$route.query.id);
      this.id = this.$route.query.id;
      this.findUserById(this.id);

    }
  }

</script>
<style lang="sass">

</style>
